<template>
	<view>
		   <!-- 模拟扫描二维码后跳转的提示 -->
		        <view class="shangjialogo"><u-icon name="level" color="#2979ff" size="28" classs="iconv"></u-icon>惠恒美皮肤管理中心</view>
		        <!-- <u-input v-model="amount" placeholder="请输入付款金额" type="number"></u-input> -->
				<view class="jinev">
					<view class="ptip">支付金额</view>
					<view><text class="fuhao">¥</text ><text class="jine">{{amount}}</text><view class="cursor"></view></view>
				</view>
				<!-- <u-keyboard ref="uKeyboard" mode="number" :showTips="false" :overlay="false" :show="true"></u-keyboard> -->
		        <!-- <u-button @click="pay" :disabled="!amount">立即付款</u-button> -->
				<view class="keyboard">
				<pan-keyboard ref="panKeyboardRef" :maxValue="1000000" :isCheck='checkValue' submitButtonText="付款" @onSubmit='onSubmit' @onChange="onChange"
					@onError="onErrorx" ></pan-keyboard>
				</view>
	</view>
</template>

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
	import panKeyboard from '@/components/pan-keyboard/pan-keyboard.vue'
	import {getJsapiTicket,prepayWithRequestPayment} from '@/api/wx/skmWxPay.js'
	export default {
		data() {
			return {
				amount: '',
				keyboard: {},
			};
		},
		computed: {
			checkValue() {
				let valueNumber = this.keyboard.valueNumber
		
				// 可以在实时这里校验输入的值
				// if (valueNumber < 100) return false;
				// if (valueNumber % 10) return false;
				return true;
			},
		},
		onLoad(option){
			const appid = "wxbfab58e7fb31d79c"
			if(option.token){
				this.loadUserInfo(option)
			}else{
				this.wxlogin(appid)
			}
			const url = window.location.href.split('#/')[0]
			console.log("url:",url)
			getJsapiTicket({url}).then(res=>{
				console.log('getJsapiTicket===',res)
				jweixin.config({
				  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				  appId: res.data.appid, // 必填，公众号的唯一标识
				  timestamp: res.data.timestamp, // 必填，生成签名的时间戳
				  nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
				  signature: res.data.signature,// 必填，签名
				  jsApiList: ['getBrandWCPayRequest'] // 必填，需要使用的JS接口列表
				});
			})
		},
		methods:{
			wxlogin(appid){
				const url = window.location.href.split('#/')[0]
				const state = window.location.href
				let redirect_uri = url+"/payer/wxlogin"
				window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appid+"&redirect_uri="+encodeURIComponent(redirect_uri)+"&response_type=code&scope=snsapi_userinfo&state="+state+"#wechat_redirect"
			},
			loadUserInfo(option){
				// 设置token信息
				this.$store.dispatch('wxLogin', option.token).then(() => {
					// 加载用户信息
				  this.getWxUserInfo()
				})
			},
			// 登录成功后，处理函数
			getWxUserInfo() {
			  // 设置用户信息
			  this.$store.dispatch('GetInfo').then(res => {
			  })
			},
			// 金额完成/打开验证码
			onSubmit(e) {
				this.keyboard = e
				console.log(e)
				this.amount = e.valueNumber
				// 调用后台接口进行预下单
				prepayWithRequestPayment({amount:this.keyboard.valueToLocaleString}).then(res=>{
					WeixinJSBridge.invoke('getBrandWCPayRequest', {
						"appId": res.data.appId,     //公众号ID，由商户传入     
						"timeStamp": res.data.timeStamp,     //时间戳，自1970年以来的秒数     
						"nonceStr": res.data.nonceStr,      //随机串     
						"package": res.data.packageVal,
						"signType": res.data.signType,     //微信签名方式：     
						"paySign": res.data.paySign //微信签名 
					},
					function(res) {
						if (res.err_msg == "get_brand_wcpay_request:ok") {
								setTimeout(()=>{
									that.$tab.reLaunch('/pages/mine/index')
								},400)
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠，商户需进一步调用后端查单确认支付结果。
						}else if(res.err_msg == "get_brand_wcpay_request:cancel"){
							// alert('取消')
						}else if(res.err_msg == "get_brand_wcpay_request:fail"){
							// alert('失败')
						}
					});
				})
			},
			// 金额输入中
			onChange(e) {
				this.keyboard = e
				
				console.log('222',e)
				this.amount = e.valueNumber
			},
			onErrorx(){
				console.log('超过限制')
			},
			pay() {
			            // 这里模拟付款逻辑，实际开发中需要调用支付接口
			            if (this.amount) {
			                uni.showToast({
			                    title: `成功支付 ${this.amount} 元`,
			                    icon: 'success'
			                });
			                this.amount = '';
			            }
			        }
		}
	}
</script>

<style lang="scss">
.shangjialogo{
	    display: flex;
	    align-items: center;
		    font-size: 22px;
		    margin-top: 30px;
		    margin-bottom: 30px;
		    margin-left: 15px;
			.iconv{
				margin-right:10px;
			}
}
.jinev{
	margin: 10px;
	    background-color: #ffffff;
	    padding: 10px;
	    border-radius: 6px;
		.ptip{
			    color: #646464;
			    font-size: 15px;
				margin-bottom: 10px;
		}
		.fuhao{
			font-size:30px;
			margin-right:10px;
		}
		.jine{
			font-size:40px;
		}
}
.keyboard {
		position: fixed;
		box-sizing: border-box;
		width: 100%;
		bottom: 0;
		padding: 20rpx;
		background-color: #f7f7f7;
	}
	.cursor {
		position: relative;
		top: 10rpx;
		display: inline-block;
		width: 2px;
		height: 80rpx;
		margin-left: 10rpx;
		animation-name: cursor;
		animation-duration: 0.8s;
		animation-iteration-count: infinite;
		z-index: 1;
		background-color: #178E57;
	}
	
	@keyframes cursor {
		0% {
			opacity: 1;
		}
	
		100% {
			opacity: 0;
		}
	}
</style>
